<template>
	<view class="page" @touchmove.stop.prevent="moveHandle">
		<view class="top">
			<image src="/static/img/logo.png" class="user"></image>
			<text class="cloud">云盟商桥</text>
			<text class="login">注册</text>
			<view class="tel">
				<input type="number"  @input="inputPhone" placeholder="请填写手机号码" />
			</view>
			<view class="checked">
				<input type="number" @input="inputCode" placeholder="请填写验证码" />
				<text @click="toCode" v-if="show">获取验证码</text>
				<text v-if="!show">{{count}}秒后重新发送</text>
			</view>
			<view class="agreement-wrap">
				<view class="circle" @click="isChecked">
					<view class="check" v-if="isSelected"></view>
				</view>
				<text class="agreement">勾选同意</text>
				<view class="agreement" @click="getService();">
					<text style="color: #ff7e00; text-decoration: underline;">“云盟商桥”用户服务协议</text>
				</view>
			</view>
			
		</view>
		<view class="login-now" v-if="isSelected" @click="toRegister">
			<image src="/static/img/login.png"></image>
			<text   >立即注册</text>
			
		</view>
		<view class="login-now" v-if="!isSelected" @click="toRegister">
			<image src="/static/img/register.png"></image>
			<text >立即注册</text>
			
		</view>
		<text class="register" @click="toLogin">去登录</text>
		<view class="bottom-img">
			<image src="/static/img/login-bottom.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		//页面加载执行 获取前页传过来的参数
		onLoad: function(options) {
			//获取用户缓存信息
			this.getmember()
			//获取用户地址
			this.getLocationAddress()
		},
		onshow(){
			this.getLocationAddress()
		},
	
		//赋值 即可 直接用  不赋值 直接写  this.a 也可以
		data() {
			return {
					isSelected: false,
					getmemberInfo:'',
					count:'',
					show: true,
					province:'',
					city:'',
					area:'',
					cid:'',
					lon:'',
					lat:'',
			}
		},
		//跳转页面  调用接口
		methods: {
			moveHandle() {
					return;
			},
			
			//获取用户缓存信息
			getmember() {
				this.getmemberInfo = uni.getStorageSync('member')
				console.log(this.getmemberInfo);
			},
			//是否选择 协议
			isChecked() {
				this.isSelected = !this.isSelected;
			},
			//跳转登录
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/Login'
				})
			},
			
			getLocationAddress(){
				//获取经纬度
			
				let _this = this;
				//#ifdef APP-PLUS
				plus.geolocation.getCurrentPosition( function(position){
				// plus.nativeUI.alert(JSON.stringify(position));
				var info = position.addresses;
				 _this.lat = position.coords.latitude;
				 _this.lon = position.coords.longitude;
				 
				console.log( _this.lat,position.coords,info,'--------------------------------获取经纬度')
				
				}, function ( e ) {
				plus.nativeUI.alert( "获取定位位置信息失败："+e.message );
				},{geocode:true});
				//#endif
			
			},
			//注册
			toRegister() {
				// return false
				var that = this
				console.log(that.getmemberInfo,'yognhu ')
				var cid = uni.getStorageSync("cid");
				console.log(that.lon,'获取经纬度 ')
				console.log(that.lat,'获取经纬度 ')
				if(	that.isSelected == true){
					that.$api.getRegister({
						phone:that.phone,
						verify:that.code,
						name:that.getmemberInfo.nickName,
						headpic:that.getmemberInfo.avatarUrl,
						lon:that.lon,
						lat:that.lat,
						client_id:cid,
						openId_app:that.getmemberInfo.openId,
						unionId:that.getmemberInfo.unionId,
						
					}).then(res => {
						console.log(res);
						if(res.data.status == true){
							//成功提示信息
							 uni.showToast({
							    title:res.data.msg ,
								
							 }),
							 uni.setStorage({
								 key: "member",
								 data: res.data.data,
							 })
							//获取token  把token 存到缓存
							uni.setStorage({
								key: "token",
								data: res.data.data.token,
								success() {
									setTimeout(function(){
										//跳转到首页
										var pages = getCurrentPages(); // 当前页面
										var beforePage = pages[pages.length - 2]; // 前一个页面
										var _count = 0
										for (let i = pages.length-1; i >= 0; i--) {
											console.log(pages[i].route)
											if(pages[i].route!="pages/login/Login"&&pages[i].route!="pages/register/Register"){
												
												uni.navigateBack({
													delta: _count
												})
												return
											}else{
												_count++
											}
										}
										//注册成功 跳转到首页
										// uni.switchTab({
										// 	url: '/pages/index/index'
										// })
									},1000)
									
								}
							})
						}
					})
				}else{
					uni.showToast({
					   title:'请勾选协议' ,
												
					})
				}
			
			},
			//获取验证码
			toCode() {
				this.$api.getCode({phone:this.phone,mark:'register'}).then(res => {
					console.log(res)
					if(res.data.status == true){
						 uni.showToast({
						    title:res.data.msg 
						 })
						const time_count = 60;
						if (!this.timer) {
							this.count = time_count;
							this.show = false;
							this.timer = setInterval(() => {
								if (this.count > 0 && this.count <= time_count) {
									this.count--;
								} else {
									this.show = true;
									clearInterval(this.timer);
									this.timer = null;
								}
							}, 1000)
						}
						console.log(res);
					}else{
						uni.showToast({
						   title:'发送失败'
						})
					}
				})
			},
			//实时获取输入的验证码
			inputCode: function(event) {  
				this.code = event.target.value
			},
			//实时获取输入的手机号
			inputPhone: function(event) {
				this.phone = event.target.value  
			}, 
			// 用户服务协议
			getService() {
				uni.navigateTo({
					url: '/pages/my/Agreement'
				})
			}
		},
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100vh;
	}
	.top {
		width: 750rpx;
		height: 848rpx;
	}
	.user {
		width: 162rpx;
		height: 162rpx;
		margin-left: 294rpx;
		margin-top: 242rpx;
	}
	.cloud {
		text-align: center;
		display: block;
		font-size: 38rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51,51,51,1);
	}
	.login {
		display: block;
		margin-left: 339rpx;
		margin-top: 45rpx;
	}
	.tel {
		width: 630rpx;
		height: 109rpx;
		line-height: 109rpx;
		margin-left: 60rpx;
		margin-top: 45rpx;
		border-bottom: 1rpx solid #999;
	}
	.tel input {
		padding-left: 30rpx;
		width: 100%;
		height: 100%;
		z-index: 100;
	}
	.checked {
		position: relative;
		width: 630rpx;
		height: 108rpx;
		margin-left: 60rpx;
		border-bottom: 1rpx solid #999;
		z-index: 100;
	}
	.checked input {
		padding-left: 30rpx;
		width: 100%;
		height: 100%;
	}
	.checked text {
		position: absolute;
		right: 0;
		top: 45rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-decoration: underline;
		color: rgba(254,177,71,1);
	}
	.login-now {
		position: relative;
		z-index: 10;
		width: 386rpx;
		height: 76rpx;
		line-height: 76rpx;
		margin-left: 182rpx;
		margin-top: 160rpx;
	}
	.login-now image {
		width: 386rpx;
		height: 76rpx;
		
	}
	.login-now text {
		position: absolute;
		left: 126rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255,255,255,1);
	}
	.bottom-img {
		position: absolute;
		bottom: 0;
		width: 750rpx;
		height: 630rpx;
		z-index: 1;
	}
	.bottom-img image {
		width: 750rpx;
		height: 630rpx;
	}
	.register {
		position: relative;
		z-index: 100;
		display: block;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-decoration: underline;
		color: #000;
		margin-left: 323rpx;
		margin-top: 63rpx;
	}
	.agreement-wrap {
		position: relative;
		z-index: 100;
		display: flex;
		align-items: center;
	}
	.agreement {
		display: flex;
		margin-left: 20rpx;
		margin-top: 60rpx;
	}
	.agreement {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102,102,102,1);
	}
	.circle {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 30rpx;
		height: 30rpx;
		border: 2rpx solid rgba(204,204,204,1);
		border-radius: 50%;
		margin-left: 90rpx;
		margin-top: 60rpx;
	}
	.check {
		width: 22rpx;
		height: 22rpx;
		background: rgba(254,177,71,1);
		border-radius: 50%;
	}
</style>

